
<!--Css per la finestra modal-->
<link type="text/css" rel="stylesheet" href="styles/thickbox.css">
<!--Css per els botons-->
<style>
    body {
        cursor: default;
        text-align: left;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        margin: 0;
        padding: 5px;
    }

    table th {
        vertical-align: top;
    }

    input {
        text-align: center;
        font-family: calibri, arial, sans-serif;
        font-size: 13px;
        background-color: white;
        border: 1px solid;
        border-color: #abadb3 #dbdfe6 #e3e9ef #e2e3ea;
        padding: 1px;
    }
    input:focus, input:hover  {
        border-color: #5794bf #b7d5ea #c7e2f1 #c5daed;
    }

    .pickerImg {
        position: absolute;
        margin-left: -16px;
        margin-top: 5px;
        cursor: pointer;
    }
    .infoBox {
        background-color: #fefdec;
        border: 1px solid #edebcd;
        padding: 6px;
        margin-bottom: 20px;
    }

    element.style  {
        background-position:0 0;
    }
    span.radiotemperaturas {
        background:url("images/radio_temperaturas.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    span.radiohumitat {
        background:url("images/radio_humitat.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    span.radiopresio {
        background:url("images/radio_presio.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    span.radiopluja {
        background:url("images/radio_pluja.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    span.radiovent {
        background:url("images/radio_vent.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    span.radiosensacio {
        background:url("images/radio_sensacio.gif") no-repeat scroll 0 0 transparent;
        clear:left;
        display:block;
        float:left;
        height:20px;
        padding:0 5px 0 0;
        width:150px;
    }
    static.layout.css
    {
        list-style:none outside none;
        margin:0;
        padding:0;
    }
    p, ul, label {
        color:#666666;
        font:1em/1.8em helvetica,sans-serif;
    }
    .select {
        position: absolute;
        width: 158px;
        height: 21px;
        padding: 0 24px 0 8px;
        color: #fff;
        font: 12px/21px arial,sans-serif;
        background: url(images/select.png) no-repeat;
        overflow: hidden;
    }
</style>
<!-- css per el calendari-->
<link rel="stylesheet" href="styles/datepicker.css" type="text/css" />
<link rel="stylesheet" media="screen" type="text/css" href="css/layout.css" />
<!--script per la finestra modal-->
<script type="text/javascript" src="jslib/thickbox.js"></script>
<!--script de funcionalitat interna de la pantalla-->
<script type="text/javascript">
    //funcio per generar la forma en que pasem les dades a chart.php indican el grafic que volem generar les dades i si es comparativa
    function diaSelecEvent(){
        var i
        opcions=document.formu.tipo;
        for (i=0;i<opcions.length;i++){
            if (opcions[i].checked)
                break;
        }
        var seleccionado = opcions[i].value
        var precisio=document.formu.temps.value;
        if(seleccionado.substr(0,4)=='comp'){
          document.getElementById('enllas').href="chart.php?precisio="+precisio +"&temps=" + seleccionado.substr(4,12) + "&comp=comp&data=" +jQuery('#idcalendari').attr('value')+"0000&height=320&width=620";

            }else{
        document.getElementById('enllas').href="chart.php?precisio="+precisio +"&temps=" + seleccionado + "&data=" +jQuery('#idcalendari').attr('value')+"0000&height=320&width=620";
        }
    }

    //carrega dels buttons i calendari
    jQuery(document).ready(function(){

        (function(jQuery){
            var nowfg = new Date();
            jQuery('#date').DatePicker({
                flat: true,
                date: nowfg,
                current:nowfg,
                format:'Ymd',
                calendars: 1,
                view: 'days',
                onChange: function(formated, dates) {
                    //idcalendari es on es guarda la data que a seleccionat el usuari
                    jQuery('#idcalendari').attr('value',formated);
                }
            });
            jQuery('#widgetCalendar div.datepicker').css('position', 'absolute');
        })(jQuery)
        //carrega dels botons
        window.onload=Custom.init();
    });
</script>

<h1>Cerca de Dades</h1>
<form name="formu">
    <table width="60%" class="taula">
        <tr>
            <td class="capçalera" colspan="3">Generar Gràfics</td>
        </tr>
        <tr>
            <td class="camp">Tipus de Gràfics</td><td class="camp">Comparatives</td><td class="camp">Precisió</td>
        </tr>
        <tr>
            <td class="valor"  width="175px"style="padding:5px;padding-top:0px;padding-left:15px;">

                <input type="radio" id="temperaturas" class="styled" checked="checked" name="tipo" value="temp">
                <input type="radio" id="humitat" class="styled" name="tipo" value="hum">
                <input type="radio" id="presio" class="styled" name="tipo" value="pres">
                <input type="radio" id="pluja" class="styled" name="tipo" value="pluja">
                <input type="radio" id="vent" class="styled" name="tipo" value="vent">
                <input type="radio" id="sensacio" class="styled" name="tipo" value="sensacio">

            </td>
            <td class="valor" width="175px" style="padding:5px;padding-top:0px;padding-left:15px;">
                <input type="radio" id="temperaturas" class="styled" name="tipo" value="comptemp">
                <input type="radio" id="humitat" class="styled" name="tipo" value="comphum">
                <input type="radio" id="presio" class="styled" name="tipo" value="comppres">
                <input type="radio" id="pluja" class="styled" name="tipo" value="comppluja">
                <input type="radio" id="vent" class="styled" name="tipo" value="compvent">
                <input type="radio" id="sensacio" class="styled" name="tipo" value="compsensacio">
            </td>
            <td class="valor" style="padding-right:45px;">
                <p id="date"></p>
                <select name="temps" id="temps" class="styled">
                    <option value="1">24h</option>
                    <option value="2">7 dies</option>
                    <option value="3">30 dies</option>
                    <option value="4">1 any</option>
                </select></td>
        </tr>
        <tr>
            <td colspan="3" class="valor" style="text-align:center;">
                <input type="hidden" value="<?php echo date('Ymd');?>" id="idcalendari">
                <!--enllaç que genera la finestra thickbox amb ajax-->
                <a  id="enllas" class="thickbox"  onclick="diaSelecEvent()"href="" ><img src="images/btngrafico.gif"></a>
            </td>
        </tr>
    </table>
</form>
